<script>
	$(document).ready(function(){
/* CHANGE TEXT SETTING */
		$("#h3_page_title").text("Manajemen Produk");
		$("#breadcrumb_title").html("Manajemen Produk");
		$("#managebook_sampulview").hide();
/* END CHANGE TEXT SETTING */
/* DECLARE VARIABLE */
		var theme = "fresh";
		var managebook_grid = $("#managebook_grid");
		var managebook_windowaddedit = $("#managebook_windowaddedit");
		var managebook_addeditform = $("#managebook_addeditform");
		var managebook_buttonsave = $("#managebook_buttonsave");
		var managebook_buttonreset = $("#managebook_buttonreset");
		var managebook_actionfield = $("#managebook_actionfield");
		var managebook_idfield = $("#managebook_idfield");
		var managebook_kodefield = $("#managebook_kodefield");
		var managebook_namafield = $("#managebook_namafield");
		var managebook_kategorifield = $("#managebook_kategorifield");
		var managebook_deskripsifield = $("#managebook_deskripsifield");
		var managebook_hargafield = $("#managebook_hargafield");
		var managebook_sampulfield = $("#managebook_sampulfield");
		var managebook_sampulfieldname = $("#managebook_sampulfieldname");
		var managebook_filefield = $("#managebook_filefield");
		var managebook_filefieldname = $("#managebook_filefieldname");
		var managebook_aktiffield = $("#managebook_aktiffield");
/* END DECLARE VARIABLE */
/* SETTING VALIDATOR */
	managebook_addeditform.jqxValidator({
		theme : theme,
		rules : [
			{ input: '#managebook_namafield', message: 'Harus diisi!', action: 'keyup', rule: 'required' },
			{ input: '#managebook_deskripsifield', message: 'Harus diisi!', action: 'keyup', rule: 'required' },
			{ input: '#managebook_hargafield', message: 'Harus diisi!', action: 'keyup', rule: 'required' },
			{ input: '#managebook_sampulfield', message: 'Harus diisi!', action: 'keyup', rule: 'required' },
			{ input: '#managebook_filefield', message: 'Harus diisi!', action: 'keyup', rule: 'required' }
		]
	});
/* END SETTING VALIDATOR */
/* SETTING THEME AND TYPE */
	// button type
		managebook_buttonreset.jqxButton({ theme : theme, width : 100, height : 25});
		managebook_buttonsave.jqxButton({ theme : theme, width : 100, height : 25});
	// swicth
		managebook_aktiffield.jqxSwitchButton({ height: 22, width: 125, theme: theme, checked: true });
	// combo box type
		kategori_listsource = {
			id : 'kategori_listsource',
			url : 'c_managebook/action?action=data_kategori',
			datatype : 'json',
			root : 'results',
			datafields : [
				{ name : 'kategori_id'},
				{ name : 'kategori_nama'},
			]
		}
		kategori_listadapter = new $.jqx.dataAdapter(kategori_listsource);
		managebook_kategorifield.jqxComboBox({
			theme : theme,
			width : 210,
			height : 25,
			source : kategori_listadapter,
			displayMember : 'kategori_nama',
			valueMember : 'kategori_id'
		});
	// grid type
		var managebook_listsource = {
			id : 'managebook_listsource',
			url : 'c_managebook/data_managebook?key=',
			datatype : 'json',
			root : 'results',
			datafields : [
				{ name : 'produk_id'},
				{ name : 'produk_kode'},
				{ name : 'produk_nama'},
				{ name : 'produk_deskripsi'},
				{ name : 'produk_harga', type : 'number'},
				{ name : 'produk_sampul'},
				{ name : 'produk_file'},
				{ name : 'produk_aktif'},
				{ name : 'produk_kategori'},
				{ name : 'kategori_nama'},
				{ name : 'produk_created_by'},
				{ name : 'produk_created_date'},
			]
		}
		var managebook_listadapter = new $.jqx.dataAdapter(managebook_listsource);
		var initrowdetails = function (index, parentElement, gridElement, datarecord) {
			var tabsdiv = null;
			var information = null;
			var notes = null;
			tabsdiv = $($(parentElement).children()[0]);

			if (tabsdiv != null) {
				information = tabsdiv.find('.information');
				notes = tabsdiv.find('.notes');
				var title = tabsdiv.find('.title');
				title.text(datarecord.produk_nama);

				var container = $('<div style="margin: 5px;"></div>')
				container.appendTo($(information));
				var leftcolumn = $('<div style="float: left; width: 35%;"></div>');
				var rightcolumn = $('<div style="float: left; width: 65%;"></div>');
				container.append(leftcolumn);
				container.append(rightcolumn);

				var photo = $("<div class='jqx-rc-all' style='margin: 10px;'><b>Cover :</b></div>");
				var image = $("<div style='margin-top: 10px;'></div>");
				var imgurl = 'uploads/images/' + datarecord.produk_sampul;
				var img = $('<img height="200" width="180" src="' + imgurl + '"/>');
				image.append(img);
				image.appendTo(photo);
				leftcolumn.append(photo);

				var produkkode = "<div style='margin: 10px;'><b>Kode Produk : </b> " + datarecord.produk_kode + "</div>";
				var produknama = "<div style='margin: 10px;'><b>Nama Produk : </b> " + datarecord.produk_nama + "</div>";
				var produkkategori = "<div style='margin: 10px;'><b>Kategori : </b> " + datarecord.kategori_nama + "</div>";
				var produkharga = "<div style='margin: 10px;'><b>Harga : </b> " + datarecord.produk_harga + "</div>";
				var produkdeskripsi = "<div style='margin: 10px;'><b>Deskripsi : </b> " + datarecord.produk_deskripsi + "</div>";
				
				$(rightcolumn).append(produkkode);
				$(rightcolumn).append(produknama);
				$(rightcolumn).append(produkkategori);
				$(rightcolumn).append(produkharga);
				$(rightcolumn).append(produkdeskripsi);

				$(tabsdiv).jqxTabs({ width: 930, height: 300, theme: theme });
			}
		}
		managebook_grid.jqxGrid({
			theme : theme,
			width : 1000,
			source : managebook_listadapter,
			filterable : true,
			autoheight : true,
			sortable : true,
			pageable : true,
			showtoolbar : true,
			rowdetails: true,
			rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'></li></ul><div class='information'></div></div>", rowdetailsheight: 330 },
			initrowdetails: initrowdetails,
			toolbarHeight : 40,
			columns : [
				{ text : 'Kode Produk', datafield : 'produk_kode', align : 'center'},
				{ text : 'Id Produk', datafield : 'produk_id', hidden : true},
				{ text : 'Nama Produk', datafield : 'produk_nama', align : 'center'},
				{ text : 'Kategori', datafield : 'kategori_nama', align : 'center'},
				{ text : 'Harga', datafield : 'produk_harga', cellsformat : 'c', cellsalign : 'right', align : 'center'},
				{ text : 'Aktif', datafield : 'produk_aktif', align : 'center'},
			],
			rendertoolbar : function(toolbar){
				var me = this;
				var container = $("<div style='margin: 5px;'></div>");
				var managebook_add = $("<div class='jqx-rc-all jqx-rc-all-fresh jqx-button jqx-button-fresh jqx-widget jqx-widget-fresh jqx-fill-state-normal jqx-fill-state-normal-fresh' id='managebook_addbutton' style='height: 22px; float: left; width: 100px;'><img src='../assets/images/add.png'><span style='margin-left:5px;'>Tambah</span></div>");
				var managebook_edit = $("<div class='jqx-rc-all jqx-rc-all-fresh jqx-button jqx-button-fresh jqx-widget jqx-widget-fresh jqx-fill-state-normal jqx-fill-state-normal-fresh' id='managebook_editbutton' style='height: 22px; float: left; width: 100px;'><img src='../assets/images/edit.png'><span style='margin-left:5px;'>Ubah</span></div>");
				var managebook_delete = $("<div class='jqx-rc-all jqx-rc-all-fresh jqx-button jqx-button-fresh jqx-widget jqx-widget-fresh jqx-fill-state-normal jqx-fill-state-normal-fresh' id='managebook_deletebutton' style='height: 22px; float: left; width: 100px;'><img src='../assets/images/delete.png'><span style='margin-left:5px;'>Hapus</span></div>");
				var managebook_searchtext = $("<input type='text' class='jqx-input jqx-rc-all' id='managebook_searchtext' style='height:27px; float:left;'>");
				var managebook_search = $("<div class='jqx-rc-all jqx-rc-all-fresh jqx-button jqx-button-fresh jqx-widget jqx-widget-fresh jqx-fill-state-normal jqx-fill-state-normal-fresh' id='managebook_searchbutton' style='height: 22px; float: left; width: 100px;'><img src='../assets/images/search.png'><span style='margin-left:10px;'>Cari</span></div>");
				var managebook_refresh = $("<div class='jqx-rc-all jqx-rc-all-fresh jqx-button jqx-button-fresh jqx-widget jqx-widget-fresh jqx-fill-state-normal jqx-fill-state-normal-fresh' id='managebook_refreshbutton' style='height: 22px; float: left; width: 100px;'><img src='../assets/images/refresh.png'><span style='margin-left:10px;'>Refresh</span></div>");
				
				toolbar.append(container);
				container.append(managebook_add);
				container.append(managebook_edit);
				container.append(managebook_delete);
				container.append(managebook_searchtext);
				container.append(managebook_search);
				container.append(managebook_refresh);
				managebook_add.click(function(){
					reset_form();
					function get_kode(){
						var date = new Date();
						var year = date.getFullYear();
						var month = date.getMonth();
						var day = date.getDate();
						var hour = date.getHours();
						var min = date.getMinutes();
						var sec = date.getSeconds();
						var kode = year + "" + month + "" + day + "" + hour + "" + min + "" + sec;
						return kode;
					}
					managebook_actionfield.val("managebook_add");
					managebook_windowaddedit.jqxWindow('open');
					managebook_kodefield.val(get_kode());
				});
				managebook_edit.click(function(){
					var rowindex = managebook_grid.jqxGrid('getselectedrowindex');
					var record = managebook_grid.jqxGrid('getrowdata', rowindex);
					if(record !== null){
						managebook_actionfield.val("managebook_edit");
						managebook_idfield.val(record.produk_id);
						managebook_kodefield.val(record.produk_kode);
						managebook_namafield.val(record.produk_nama);
						managebook_kategorifield.find('input').val(record.kategori_nama);
						managebook_deskripsifield.val(record.produk_deskripsi);
						managebook_hargafield.val(record.produk_harga);
						//managebook_sampulfield.val(record.produk_sampul);
						//managebook_filefield.val(record.produk_file);
						managebook_aktiffield.val(record.produk_aktif);
						managebook_windowaddedit.jqxWindow('open');
					}else{
						show_alert("Choose one...", "Pilih salah satu data...");
					}
				});
				managebook_delete.click(function(){
					var rowindex = managebook_grid.jqxGrid('getselectedrowindex');
					var record = managebook_grid.jqxGrid('getrowdata', rowindex);
					if(record !== null){
						var managebook_id = record.produk_id;
						if(window.confirm('Apakah anda yakin menghapus data ini ?')){
							$.ajax({
								url : 'c_managebook/action',
								type : 'POST',
								data : {
									managebook_id : managebook_id,
									action : 'managebook_delete'
								},success : function(msg){
									var result = eval(msg);
									if(msg == 1){
										show_alert("Save Success...", "Data berhasil disimpan...");
										refresh_grid();
									}else{
										show_alert("Save Failed...", "Data gagal disimpan...");
									}
								}
							});
						}
					}else{
						show_alert("Choose one...", "Pilih salah satu data...");
					}
				});
				managebook_search.click(function(){
					var key = managebook_searchtext.val();
					managebook_listsource['url'] = 'c_managebook/data_managebook?key=' + key;
					managebook_listadapter.dataBind();
				});
				managebook_refresh.click(function(){
					managebook_searchtext.val('');
					managebook_listsource['url'] = 'c_managebook/data_managebook?key=';
					managebook_grid.jqxGrid('updatebounddata');
				});
			}
		});
	// window type
		managebook_windowaddedit.jqxWindow({
			theme : theme,
			autoOpen : false,
			width : 400,
			height : 400,
			isModal : true,
			cancelButton : managebook_buttonreset
		});
	// File upload
		$('#managebook_sampulfield').fileupload({
			dataType: 'json',
			formData : function (form) {
				return [{ name: 'kode', value: $('#managebook_kodefield').val() }];
			},
			done: function (e, data) {
				var text = "";
				$.each(data.result, function (index, file) {
					text = text + file.name;
					$("#managebook_sampulfieldname").val(text);
					$("#managebook_sampulview").hide();
					$("#managebook_sampulview").replaceWith("<img src='uploads/tempimages/" + text + "' id='img_sampul'>");
					$("#managebook_sampulview").show();
				});
			}
		});
		$('#managebook_filefield').fileupload({
			dataType: 'json',
			formData : function (form) {
				return [{ name: 'kode', value: $('#managebook_kodefield').val() }];
			},
			done: function (e, data) {
				var text = "";
				$.each(data.result, function (index, file) {
					text = text + file.name;
					$("#managebook_filefieldname").val(text);
				});
			}
		});
/* END SETTING THEME AND TYPE */
/* DECLARE FUNCTION */
		function refresh_grid(){
			managebook_grid.jqxGrid('updatebounddata');
		}
		function reset_form(){
			managebook_actionfield.val('');
			managebook_idfield.val('');
			managebook_kodefield.val('');
			managebook_namafield.val('');
			managebook_kategorifield.jqxComboBox('clearSelection');
			managebook_deskripsifield.val('');
			managebook_hargafield.val('');
			managebook_sampulfield.val('');
			managebook_sampulfieldname.val('');
			managebook_filefield.val('');
			managebook_filefieldname.val('');
			managebook_aktiffield.val('');
			$("#managebook_sampulview").hide();
			managebook_addeditform.jqxValidator('hide');
		}
	// Function onclick button
		managebook_buttonreset.click(function(){
			reset_form();
		});
		managebook_buttonsave.click(function(){
			var managebook_id = "";
			var managebook_action = "";
			var managebook_nama = "";
			var managebook_kode = "";
			var managebook_kategori = "";
			var managebook_deskripsi = "";
			var managebook_harga = "";
			var managebook_sampul = "";
			var managebook_file = "";
			var managebook_aktif = "";
			
			managebook_id = managebook_idfield.val();
			managebook_action = managebook_actionfield.val();
			managebook_kode = managebook_kodefield.val();
			managebook_nama = managebook_namafield.val();
			if(managebook_kategorifield.jqxComboBox('getSelectedItem') !== null){
				managebook_kategori = managebook_kategorifield.jqxComboBox('getSelectedItem').value;
			}
			managebook_deskripsi = managebook_deskripsifield.val();
			managebook_harga = managebook_hargafield.val();
			managebook_sampul = managebook_sampulfieldname.val();
			managebook_file = managebook_filefieldname.val();
			if(managebook_aktiffield.jqxSwitchButton('checked') == true){
				managebook_aktif = 'y';
			}else{
				managebook_aktif = 't';
			}
			$.ajax({
				url : 'c_managebook/action',
				type : 'POST',
				data : {
					managebook_id : managebook_id,
					action : managebook_action,
					managebook_kode : managebook_kode,
					managebook_nama : managebook_nama,
					managebook_kategori : managebook_kategori,
					managebook_deskripsi : managebook_deskripsi,
					managebook_harga : managebook_harga,
					managebook_sampul : managebook_sampul,
					managebook_file : managebook_file,
					managebook_aktif : managebook_aktif
				},success : function(msg){
					var result = eval(msg);
					if(msg == 1){
						managebook_windowaddedit.jqxWindow('close');
						show_alert("Save Success...", "Data berhasil disimpan...");
						refresh_grid();
					}else{
						show_alert("Save Failed...", "Data gagal disimpan...");
					}
				}
			});
		});
/* END DECLARE FUNCTION */
/* DECLARE ALERT WINDOW */
		var managebook_alertwindow = $("#managebook_alertwindow");
		var managebook_alertheader = $("#managebook_alertheader");
		var managebook_alertcontent = $("#managebook_alertcontent");
		var managebook_alertbutton = $("#managebook_alertbutton");
		managebook_alertbutton.jqxButton({ theme : theme, width : 100, height : 25});
		managebook_alertwindow.jqxWindow({
			theme : theme,
			autoOpen : false,
			width : 300,
			height : 150,
			isModal : true,
			okButton : managebook_alertbutton
		});
		function show_alert(header, content){
			managebook_alertheader.html(header);
			managebook_alertcontent.html(content);
			managebook_alertwindow.jqxWindow('open');
		}
/* END DECLARE ALERT WINDOW */
	});
</script>
<div id="managebook_content">
	<div class="row-fluid">
		<div class="span8">
			<div id="managebook_grid"></div>
			<div id="managebook_windowaddedit" class="must_empty">
				<div>Form tambah / ubah produk</div>
				<div>
					<form id="managebook_addeditform">
						<input type="hidden" id="managebook_actionfield">
						<input type="hidden" id="managebook_idfield">
						<input type="hidden" id="managebook_kodefield">
						<table>
							<tr>
								<td>Nama Produk</td>
								<td><input type="text" id="managebook_namafield" class="jqx-input jqx-rc-all"></td>
							</tr>
							<tr>
								<td>Kategori</td>
								<td><div id="managebook_kategorifield"></div></td>
							</tr>
							<tr>
								<td>Deskripsi Produk</td>
								<td><textarea id="managebook_deskripsifield" style="height:70px;width:202px;"></textarea></td>
							</tr>
							<tr>
								<td>Harga Produk</td>
								<td><input type="text" id="managebook_hargafield" class="jqx-input jqx-rc-all"></td>
							</tr>
							<tr>
								<td>Sampul</td>
								<td>
									<input type="file" id="managebook_sampulfield" class="jqx-input jqx-rc-all" name="userfile" data-url="upload/upload_img">
									<div id="managebook_sampulview"></div>
									<input type="hidden" id="managebook_sampulfieldname">
								</td>
							</tr>
							<tr>
								<td>File</td>
								<td>
									<input type="file" id="managebook_filefield" class="jqx-input jqx-rc-all" name="userfile" data-url="upload/upload_book">
									<input type="hidden" id="managebook_filefieldname">
								</td>
							</tr>
							<tr>
								<td>Aktif</td>
								<td><div id="managebook_aktiffield"></div></td>
							</tr>
							<tr>
								<td colspan="2" align="center" style="padding-top:20px;">
									<input type="button" id="managebook_buttonsave" value="Simpan">
									<input type="reset" id="managebook_buttonreset" value="Reset">
								</td>
							</tr>
						</table>
					</form>
				</div>
			</div>
		</div>
	</div>
	<div id="managebook_alertwindow">
		<div id="managebook_alertheader"></div>
		<div>
			<div id="managebook_alertcontent" style="height:80px;"></div>
			<input type="button" id="managebook_alertbutton" value="OK" style="margin-left:100px;" />
		</div>
	</div>
</div>